<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示移动端列表布局</title>
</head>
<style>
     /*全局盒模型 start*/
    * {
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        outline: 0;
        box-sizing: border-box;
        padding:0;
        margin:0;
    }
    /*全局盒模型 end*/
    /*此为解决苹果手机对input按钮编译不一样的问题 start*/
    input[type=button], input[type=submit], input[type=file], button { 
        cursor: pointer; -webkit-appearance: none; 
    } 
    input::-webkit-input-placeholder { /* WebKit browsers */  
        color: #999;  
    }  
    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */  
        color: #999;  
    }  
    input::-moz-placeholder { /* Mozilla Firefox 19+ */  
        color: #999;  
    }  
    input:-ms-input-placeholder { /* Internet Explorer 10+ */  
        color: #999;  
    }
    /*此为解决苹果手机对input按钮编译不一样的问题 end*/
    body {
        color: #333;
        font-size: 13px;
        background-color: #f5f5f5;
    }
    h1, h2, h3, h4, h5, h6 {
        font-size: 100%;
        font-weight: normal;
        margin: 0;
    }
    .border-b {
        border-bottom: 1px solid #e0e0e0;
    }
    .p-rel {
        position: relative;
    }
    .b-s-m {
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        margin-bottom: 0.8rem;
        overflow: hidden;
        width: 100%;
    }
    .margin-t8 {
        margin-top: 0.8rem;
    }
    .wx-list {
        background-color: #fff;
    }
    .wx-list > li, .wx-list > .wx-list-item {
        position: relative;
        margin-left: 0.8em;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        cursor: pointer;
    }
    .wx-list-item {
    }
    .wx-list-text > li, .wx-list-text > .wx-list-item {
        position: relative;
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
        padding-right: 1rem;
        -webkit-box-align: center;
    }
    .wx-list-text h4, .wx-list-text p {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
    }
    .wx-list-text .wx-icon, .wx-list-text .wx-icon {
        background-repeat: no-repeat;
        width: 1.4rem;
        height: 1.4rem;
        background-size: 1.4rem 1.4rem;
        background-position: center center;
        margin-right: 0.5rem;
    }
    .wx-list-text.wx-link > li, .wx-list-text.wx-link > .wx-list-item {
        padding-right: 1.5rem;
    }
    .wx-list > li.border-b:last-child, .wx-list > .wx-list-item.border-b:last-child {
        border-bottom: 0;
    }
    .link::after, .wx-link li::after, .wx-link .wx-list-item.imitate-href::after {
        content: "";
        display: block;
        position: absolute;
        right: 0.5rem;
        top: 50%;
        margin-top: -0.5rem;
        width: 1rem;
        height: 1rem;
        background-repeat: no-repeat;
        background-size: 100% auto;
        cursor: pointer;
        background-image: url('');
    }
    .wx-phone {
        background-image: url('');
    }
    .wx-password {
        background-image: url('');
    }
</style>
<body>
    <div class="wx-list wx-list-text wx-link margin-t8">
        <div class="wx-list-item imitate-href border-b" data-href="#">
            <i class="wx-icon wx-phone"></i>
            <h4>验证手机 - 187*****700</h4>
            <div class="wx-text-info">去修改</div>
        </div>
        
        <div class="wx-list-item imitate-href border-b" data-href="#">
            <i class="wx-icon wx-password"></i>
            <h4>支付密码 - 未开启</h4>
            <div class="wx-text-info">去设置</div>
        </div>
        
    </div>
</body>
</html>